import React, { useEffect, useRef, useState } from 'react';
import { connect, useDispatch, useSelector } from 'umi';
import { Card, Typography, Table, Row, Collapse, Col, Divider } from 'antd';
import { FormInstance } from 'antd/lib/form';
import './index.less';

const { Panel } = Collapse;
const columns = [
  {
    title: '活动名称',
    dataIndex: 'activityLabel',
    width: '25%',
    align: 'center',
  },
  {
    title: '级别',
    dataIndex: 'activityLevel',
    width: '25%',
    align: 'center',
  },
  {
    title: '得分',
    dataIndex: 'score',
    sorter: (a, b) => a.score - b.score,
    width: '25%',
    align: 'center',
  },
  {
    title: '学期',
    dataIndex: 'yearSemester',
    width: '25%',
    align: 'center',
  },
];

interface DataType {
  idealsBeliefs: [
    {
      activityLabel: string;
      activityLevel: string;
      score: number;
      yearSemester: string;
    },
  ];
  practicalService: [
    {
      activityLabel: string;
      activityLevel: string;
      score: number;
      yearSemester: string;
    },
  ];
  literatureArt: [
    {
      activityLabel: string;
      activityLevel: string;
      score: number;
      yearSemester: string;
    },
  ];
  academicTechnology: [
    {
      activityLabel: string;
      activityLevel: string;
      score: number;
      yearSemester: string;
    },
  ];
  socialWork: [
    {
      activityLabel: string;
      activityLevel: string;
      score: number;
      yearSemester: string;
    },
  ];
  physicalFitness: [
    {
      activityLabel: string;
      activityLevel: string;
      score: number;
      yearSemester: string;
    },
  ];
  others: [
    {
      activityLabel: string;
      activityLevel: string;
      score: number;
      yearSemester: string;
    },
  ];
}
const SecondDetailscore = (props: any) => {
  const dispatch = useDispatch();
  const formRef = useRef<FormInstance>(null);
  const [result, setResult] = useState<DataType>();
  const getAllList = () => {
    if (props.dispatch) {
      props.dispatch({
        //路径：model的namespace+effects函数名
        type: 'Model_StudentAnalysisStudentModel/getStudentClassTwoEffect',
        payload: {
          value: JSON.parse(props.user.currrentuser).account,
          callback: (value: any) => {
            console.log(value);
            setResult(value);
          },
        },
      });
    }
  };
  useEffect(() => {
    console.log(props.user);
    if (props.user.currrentuser.length != 0) {
      console.log(JSON.parse(props.user.currrentuser));
      getAllList();
    }
  }, [props]);

  return (
    <div>
      <Card>
        <Typography.Title level={4} style={{ marginBottom: 0 }}>
          第二课堂详细成绩展示
        </Typography.Title>
      </Card>
      <Card>
        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel header={'理想信念'}>
                <Col span={24}>
                  <Table
                    dataSource={result?.idealsBeliefs}
                    columns={columns}
                  ></Table>
                </Col>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse>
              <Panel header={'实践服务'}>
                <Col span={24}>
                  <Table
                    dataSource={result?.practicalService}
                    columns={columns}
                  ></Table>
                </Col>
              </Panel>
            </Collapse>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel header={'文化艺术'}>
                <Col span={24}>
                  <Table
                    dataSource={result?.literatureArt}
                    columns={columns}
                  ></Table>
                </Col>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse>
              <Panel header={'学术科技'}>
                <Col span={24}>
                  <Table
                    dataSource={result?.academicTechnology}
                    columns={columns}
                  ></Table>
                </Col>
              </Panel>
            </Collapse>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel header={'社会工作'}>
                <Col span={24}>
                  <Table
                    dataSource={result?.socialWork}
                    columns={columns}
                  ></Table>
                </Col>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse>
              <Panel header={'体育素质'}>
                <Col span={24}>
                  <Table
                    dataSource={result?.physicalFitness}
                    columns={columns}
                  ></Table>
                </Col>
              </Panel>
            </Collapse>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel header={'其他'}>
                <Col span={24}>
                  <Table dataSource={result?.others} columns={columns}></Table>
                </Col>
              </Panel>
            </Collapse>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default connect(({ Model_StudentAnalysisStudentModel, user }: any) => ({
  Model_StudentAnalysisStudentModel,
  user,
}))(SecondDetailscore);
